<template>
  <div class="reg_1">
    <div class="immg">
      <img
        src="https://ts1.cn.mm.bing.net/th/id/R-C.61e900aea477f3f2b30585ef8db329b6?rik=IHoIaibaTjLBZQ&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f58%2f28%2fA1lMAEemor.jpg&ehk=XMZNRZ3j4C7k8nWeEcxiJTFeueCnpd564YlTHJ%2bSw44%3d&risl=&pid=ImgRaw&r=0"
        alt
      />
      <div style="font-size:12px;text-align:center">我们将以短信形式将验证码发送给您</div>
    </div>
    <div class="input_">
      <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
        <template #button>
          <!-- <van-button size="small" type="primary" backgroundcolor="red">发送验证码</van-button> -->
          <input type="button" value="发送验证码" class="send" @click="captcha()" />
        </template>
      </van-field>
      <van-button
        round
        type="info"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="next()"
        class="butn"
      >下一步</van-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      sms: ""
    };
  },
  methods: {
    captcha(){
      let phone =localStorage.getItem("tel");
      console.log("phone",phone);
      axios({
        url:"http://121.89.205.189:3001/api/user/dosendmsgcode",
        method:"post",
        data:`tel=${phone}`
      }).then(res=>{
        if(res.data.code == 200){
          alert("发送验证码成功:"+res.data.data);
          this.sms=res.data.data
        }
      })
    },
    next() {
      let phone = localStorage.getItem("tel");
      console.log(phone);
      axios({
        method: "post",
        url: "http://121.89.205.189:3001/api/user/docheckcode",
        data: `tel=${phone}&telcode=${this.sms}`
      }).then(res => {
        if (res.data.code == 200) {
          // alert("成功！")
          this.$router.push("/reg/pwd");
        }else{
          alert("验证码错误")
        }
      });
    }
  }
};
</script>

<style scoped>
.reg_1 {
  padding: 0.3125rem;
}
.immg {
  width: 18.75rem;
  height: 9.375rem;
  text-align: center;
  margin: 0.625rem auto;
}
.send {
  background-color: rgb(222, 203, 206);
  border: none;
  color: red;
  border-radius: 1.25rem;
  width: 5rem;
}
input {
  height: 1.875rem;
}
img {
  width: 50%;
  height: 40%;
}
.butn {
  width: 100%;
}
</style>